<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script src="../js/layui.js" charset="utf-8" type="text/javascript"></script>
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../css/layui.css"/>
    <script type="text/javascript">
        $(document).ready(()=>{
            let userId;
            if(localStorage.getItem("admin")){
                let admin = JSON.parse(localStorage.getItem("admin"));
                $("#userName").val(admin.userName);
                $("#userPassword").val(admin.userPassword);
                $("#userTel").val(admin.userTel);
                $("#userCreateTime").val(dayjs(admin.userCreateTime).format('YYYY-MM-DD HH:mm:ss'));
                $("#userAddress").val(admin.userAddress);
                $("#demo1").attr("src","data:image/jpeg;base64,"+admin.imgBase64+"");
                userId = admin.userId;
            }else{

            }
            $("#btn").click(()=>{
                let userImg;
                if(localStorage.getItem("user_imgPath")){
                    userImg = localStorage.getItem("user_imgPath");
                }else{
                    userImg = "";
                }
                let data = $("#form").serialize();
                data = decodeURIComponent(data,true)
                data = Qs.parse(data + "&userImg="+userImg+"&userId="+userId);
                console.log(data)
                $.ajax({
                    url:'http://127.0.0.1:2021/shopstore/user/updatebyId',
                    data:data,
                    type:'post',
                    headers: {
                        'token': JSON.parse(localStorage.getItem('token')),
                        'userId': JSON.parse(localStorage.getItem('admin')).userId
                    },
                    async:true,
                    success:(resp)=>{
                        if(resp.status === 403){
                            alert(resp.message);
                        }else if(resp.status){
                            localStorage.setItem("admin",JSON.stringify(resp.data));
                            alert(resp.msg);
                            parent.location.reload();
                        }else{
                            alert(resp.msg);
                        }
                    },
                    error:(error)=>{
                        console.log(error)
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div>
        <form class="layui-form layui-form-pane" id="form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="userName" name="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="userPassword" name="userPassword" autocomplete="off" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话号</label>
                <div class="layui-input-inline">
                    <input type="text" name="userTel" id="userTel" lay-verify="required" placeholder="请输入电话号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">注册时间</label>
                <div class="layui-input-block">
                    <input type="text" id="userCreateTime" disabled name="userCreateTime" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" id="userAddress" name="userAddress" autocomplete="off" placeholder="请输入地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">商家</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="userIsAdmin" disabled checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
                </div>
            </div>
            <div class="layui-upload">
                <label class="layui-form-label">商品图片</label>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list" style="padding-left: 110px;box-sizing: border-box;">
                    <img class="layui-upload-img" id="demo1" width="200px" height="100px" alt="图片"/>
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;padding-left: 110px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo" style="height: 5px">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
            <a name="list-progress"> </a>
            <div class="layui-form-item">
                <button id="btn" class="layui-btn" style="margin-left: 110px;margin-top: 20px;background: #0170fe;" type="button">修改</button>
            </div>
        </form>
        <script>
            layui.use(['upload', 'element', 'layer'], function() {
                var $ = layui.jquery
                    , upload = layui.upload
                    , element = layui.element
                    , layer = layui.layer;

                //常规使用 - 普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    ,url: 'http://127.0.0.1:2021/shopstore/userImgUpload' //改成您自己的上传接口
                        , headers: {
                            'token': JSON.parse(localStorage.getItem('token')),
                            'userId': JSON.parse(localStorage.getItem('admin')).userId
                        }
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#demo1').attr('src', result); //图片链接（base64）
                        });

                        element.progress('demo', '0%'); //进度条复位
                        layer.msg('上传中', {icon: 16, time: 0});
                    }
                    ,done: function(res){
                        //如果上传失败
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }
                        //上传成功的一些操作
                        //……
                        $('#demoText').html(''); //置空上传失败的状态
                        //上传成功，存储图片路径
                        console.log(res);
                        localStorage.setItem("user_imgPath",res.imgPath);
                    }
                    ,error: function(){
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function(){
                            uploadInst.upload();
                        });
                    }
                    //进度条
                    ,progress: function(n, index, e){
                        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                        if(n == 100){
                            layer.msg('上传完毕', {icon: 1});
                        }
                    }
                });
            });
        </script>
    </div>
</body>
</html>